Vue.js 3 Composition API: En Dybdegående Gennemgang for Globale Udviklere

Vue.js er hurtigt blevet et populært valg til at bygge moderne webapplikationer takket være dens imødekommende læringskurve og kraftfulde funktioner. Vue.js 3 tager dette videre med introduktionen af Composition API, en ny måde at organisere din komponentlogik på. Denne dybdegående gennemgang giver en omfattende guide til at forstå og effektivt udnytte Composition API, hvilket udstyrer dig med færdighederne til at bygge mere vedligeholdelsesvenlige, genanvendelige og testbare Vue-applikationer.

Hvad er Composition API?

Composition API er et sæt API'er, der giver os mulighed for at skrive Vue-komponenter ved hjælp af importerede funktioner i stedet for at deklarere options. I bund og grund giver det dig mulighed for at gruppere relateret logik sammen, uanset hvor det optræder i skabelonen. Dette står i kontrast til Options API (data, methods, computed, watch), som tvinger dig til at organisere kode baseret på disse foruddefinerede kategorier. Tænk på Options API som at organisere din kode efter, *hvad* det er (data, metode, osv.), hvorimod Composition API lader dig organisere kode efter, *hvad det gør*.

Kernen i Composition API kredser om setup()-funktionen. Denne funktion er indgangspunktet for at anvende Composition API i en komponent. Inde i setup() kan du definere reaktiv tilstand, beregnede egenskaber, metoder og livscyklus-hooks ved hjælp af sammensættelige funktioner (composable functions).

Hvorfor bruge Composition API?

Composition API tilbyder adskillige fordele i forhold til det traditionelle Options API, især for større og mere komplekse applikationer:

• Forbedret Kodeorganisering: Composition API giver dig mulighed for at gruppere relateret logik i sammensættelige funktioner, hvilket gør din kode mere organiseret og lettere at forstå. I stedet for at sprede relateret kode på tværs af forskellige Options API-egenskaber, kan du samle det hele ét sted. Dette er især fordelagtigt, når man arbejder med komplekse komponenter, der involverer flere funktioner.
• Forbedret Genanvendelighed: Sammensættelige funktioner kan let udtrækkes og genbruges på tværs af flere komponenter. Dette fremmer kodegenbrug og reducerer duplikering, hvilket fører til mere effektiv udvikling. Dette er en game-changer for at opretholde en konsistent brugeroplevelse på tværs af din applikation.
• Bedre Testbarhed: Composition API letter enhedstestning ved at give dig mulighed for at teste individuelle sammensættelige funktioner i isolation. Dette gør det lettere at identificere og rette fejl, hvilket resulterer i mere robuste og pålidelige applikationer.
• Typesikkerhed: Når det bruges sammen med TypeScript, giver Composition API fremragende typesikkerhed, der fanger potentielle fejl under udviklingen. Dette kan markant forbedre den overordnede kvalitet og vedligeholdelsesvenlighed af din kodebase.
• Logisk Udtrækning og Genbrug: Composition API gør det ligetil at udtrække og genbruge logiske dele af din komponent. Dette er især nyttigt, når man håndterer funktioner som datahentning, formularvalidering eller styring af brugergodkendelse, som ofte skal deles på tværs af flere komponenter.

Forståelse af de Grundlæggende Koncepter

Lad os dykke ned i de centrale koncepter, der ligger til grund for Composition API:

1. setup()

Som tidligere nævnt er setup() indgangspunktet for at bruge Composition API. Det er en komponent-option, der udføres, før komponenten oprettes. Inde i setup() definerer du reaktiv tilstand, beregnede egenskaber, metoder og livscyklus-hooks, og returnerer derefter et objekt, der indeholder de værdier, du vil eksponere til skabelonen.

Eksempel:

            import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

            

              
                Copy
              
            
          

I dette eksempel bruger vi ref til at oprette en reaktiv variabel kaldet count. Vi definerer også en metode kaldet increment, der øger værdien af count. Endelig returnerer vi et objekt, der indeholder count og increment, hvilket gør dem tilgængelige i komponentens skabelon.

2. Reaktiv Tilstand med ref og reactive

Composition API giver to kernefunktioner til at skabe reaktiv tilstand: ref og reactive.

• ref: ref tager en primitiv værdi (tal, streng, boolean, osv.) og returnerer et reaktivt og muterbart ref-objekt. Værdien tilgås og ændres via ref'ens .value-egenskab. Brug ref, når du vil spore ændringer i en enkelt værdi.
• reactive: reactive tager et objekt og returnerer en reaktiv proxy af det objekt. Ændringer i egenskaberne af det reaktive objekt vil udløse opdateringer i komponenten. Brug reactive, når du vil spore ændringer i flere egenskaber inden i et objekt.

Eksempel med ref:

            import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hej, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

            

              
                Copy
              
            
          

Eksempel med reactive:

            import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

            

              
                Copy
              
            
          

3. Beregnede Egenskaber med computed

Beregnede egenskaber (computed properties) er værdier, der er afledt af en anden reaktiv tilstand. De opdateres automatisk, når deres afhængigheder ændres. computed-funktionen tager en getter-funktion som argument og returnerer en skrivebeskyttet reaktiv ref.

Eksempel:

            import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

            

              
                Copy
              
            
          

I dette eksempel er fullName en beregnet egenskab, der afhænger af firstName og lastName. Hver gang enten firstName eller lastName ændres, vil fullName automatisk blive opdateret.

4. Watchers med watch og watchEffect

Watchers giver dig mulighed for at reagere på ændringer i reaktiv tilstand. Composition API giver to hovedmåder at oprette watchers på: watch og watchEffect.

• watch: watch giver dig mulighed for eksplicit at specificere, hvilke reaktive afhængigheder der skal overvåges. Den tager en eller flere reaktive referencer (refs, beregnede egenskaber eller reaktive objekter) som sit første argument og en callback-funktion som sit andet argument. Callback-funktionen udføres, hver gang en af de specificerede afhængigheder ændres.
• watchEffect: watchEffect sporer automatisk alle reaktive afhængigheder, der bruges inde i dens callback-funktion. Callback-funktionen udføres indledningsvist og derefter igen, hver gang en af de sporede afhængigheder ændres. Dette er nyttigt, når du vil udføre sideeffekter baseret på ændringer i reaktiv tilstand uden eksplicit at specificere afhængighederne. Vær dog forsigtig med watchEffect, da det nogle gange kan føre til ydeevneproblemer, hvis det sporer for mange afhængigheder.

Eksempel med watch:

            import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count ændret fra ${oldValue} til ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

            

              
                Copy
              
            
          

Eksempel med watchEffect:

            import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Hej')

    watchEffect(() => {
      console.log(`Beskeden er: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

            

              
                Copy
              
            
          

5. Livscyklus-hooks

Composition API giver adgang til komponentens livscyklus-hooks gennem funktioner, der starter med on, såsom onMounted, onUpdated og onUnmounted. Disse funktioner tager en callback som argument, som vil blive udført, når den tilsvarende livscyklus-hook udløses.

Eksempel:

            import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponenten er mounted')
    })

    onUnmounted(() => {
      console.log('Komponenten er unmounted')
    })

    return {}
  }
}

            

              
                Copy
              
            
          

Oprettelse af Sammensættelige Funktioner

Den virkelige styrke ved Composition API kommer fra evnen til at skabe genanvendelige sammensættelige funktioner (composable functions). En sammensættelig funktion er simpelthen en funktion, der indkapsler et stykke komponentlogik og returnerer reaktiv tilstand og funktioner, der kan bruges i flere komponenter.

Eksempel: Lad os oprette en sammensættelig funktion, der sporer musens position:

            import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

            

              
                Copy
              
            
          

Nu kan du bruge denne sammensættelige funktion i enhver komponent:

            import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

            

              
                Copy
              
            
          

Praktiske Eksempler og Anvendelsestilfælde

Lad os udforske nogle praktiske eksempler på, hvordan Composition API kan bruges i virkelige scenarier:

1. Datahentning

At oprette en sammensættelig funktion til at hente data fra et API er et almindeligt anvendelsestilfælde. Dette giver dig mulighed for at genbruge den samme logik til datahentning på tværs af flere komponenter.

            import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

            

              
                Copy
              
            
          

Du kan derefter bruge denne sammensættelige funktion i dine komponenter således:

            import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

            

              
                Copy
              
            
          

2. Formularvalidering

Formularvalidering er et andet område, hvor Composition API kan være meget nyttigt. Du kan oprette sammensættelige funktioner, der indkapsler valideringslogik og genbruge dem på tværs af forskellige formularer.

            import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'Dette felt er påkrævet'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Ugyldigt email-format'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

            

              
                Copy
              
            
          

Anvendelse i en komponent:

            import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

            

              
                Copy
              
            
          

3. Håndtering af Brugergodkendelse

Godkendelseslogik kan ofte være kompleks og duplikeret på tværs af flere komponenter. Composition API giver dig mulighed for at oprette en sammensættelig funktion, der indkapsler al godkendelseslogik og giver en ren API, som dine komponenter kan bruge.

Eksempel: (Forenklet)

            import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Simuler API-kald
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Simuler API-kald
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

            

              
                Copy
              
            
          

Bedste Praksis for Brug af Composition API

For at få mest muligt ud af Composition API, bør du overveje følgende bedste praksis:

• Hold sammensættelige funktioner fokuserede: Hver sammensættelig funktion bør have et enkelt, veldefineret formål. Dette gør dem lettere at forstå, genbruge og teste.
• Brug beskrivende navne: Vælg navne, der tydeligt angiver formålet med den sammensættelige funktion. Dette vil gøre din kode mere læsbar og vedligeholdelsesvenlig.
• Returner kun det, du har brug for: Returner kun den reaktive tilstand og de funktioner, der rent faktisk er nødvendige for komponenten. Dette hjælper med at reducere kompleksiteten i dine komponenter og forbedre ydeevnen.
• Overvej at bruge TypeScript: TypeScript giver fremragende typesikkerhed og kan hjælpe dig med at fange fejl tidligt i udviklingsprocessen. Dette er især fordelagtigt, når du arbejder med Composition API.
• Dokumenter dine sammensættelige funktioner: Tilføj kommentarer til dine sammensættelige funktioner for at forklare deres formål, hvordan de virker, og eventuelle afhængigheder de har. Dette vil gøre det lettere for andre udviklere (og dit fremtidige jeg) at forstå og bruge din kode.
• Test dine sammensættelige funktioner: Skriv enhedstests for at sikre, at dine sammensættelige funktioner fungerer korrekt. Dette vil hjælpe dig med at fange fejl tidligt og forbedre den overordnede kvalitet af din kodebase.
• Brug en konsekvent stil: Etabler en konsekvent stil for dine sammensættelige funktioner og hold dig til den. Dette vil gøre din kode mere læsbar og vedligeholdelsesvenlig.

Almindelige Faldgruber og Hvordan man Undgår Dem

Selvom Composition API tilbyder mange fordele, er der også nogle almindelige faldgruber, man skal være opmærksom på:

• Overkomplicering af sammensættelige funktioner: Det er let at lade sig rive med og skabe sammensættelige funktioner, der er for komplekse. Prøv at holde dem fokuserede og enkle. Hvis en sammensættelig funktion bliver for stor, kan du overveje at opdele den i mindre, mere håndterbare stykker.
• Utilsigtede reaktivitetsproblemer: Sørg for at du forstår, hvordan ref og reactive virker, og brug dem korrekt. For eksempel kan direkte ændring af en indlejret egenskab i en ref uden at "pakke den ud" føre til uventet adfærd.
• Forkert brug af livscyklus-hooks: Vær opmærksom på timingen af livscyklus-hooks og sørg for, at du bruger dem korrekt. For eksempel, prøv ikke at tilgå DOM-elementer i onBeforeMount, da de endnu ikke er oprettet.
• Ydeevneproblemer med watchEffect: Vær opmærksom på de afhængigheder, der spores af watchEffect. Hvis det sporer for mange afhængigheder, kan det føre til ydeevneproblemer. Overvej at bruge watch i stedet for eksplicit at specificere de afhængigheder, du vil overvåge.
• Glemme at afregistrere event listeners: Når du bruger event listeners i en sammensættelig funktion, skal du sørge for at afregistrere dem i onUnmounted-hook'en for at forhindre hukommelseslækager.

Composition API og Globale Teams

Composition API fremmer samarbejde inden for globale udviklingsteams ved at promovere:

• Standardiseret Kodestruktur: Vægten på sammensættelige funktioner giver et klart og konsekvent mønster for organisering af kode, hvilket gør det lettere for teammedlemmer fra forskellige baggrunde at forstå og bidrage til kodebasen.
• Modulært Design: Opdeling af kompleks logik i genanvendelige composables muliggør et mere modulært design, hvor forskellige teammedlemmer kan arbejde på uafhængige dele af applikationen uden at forstyrre hinandens arbejde.
• Forbedret Code Review: Den fokuserede natur af sammensættelige funktioner forenkler code review, da reviewere let kan forstå formålet og funktionaliteten af hver composable.
• Vidensdeling: Sammensættelige funktioner fungerer som selvstændige enheder af viden, som let kan deles og genbruges på tværs af forskellige projekter og teams.

Konklusion

Vue.js 3 Composition API er et kraftfuldt værktøj, der markant kan forbedre organiseringen, genanvendeligheden og testbarheden af dine Vue-applikationer. Ved at forstå de centrale koncepter og følge de bedste praksis, der er beskrevet i denne dybdegående gennemgang, kan du udnytte Composition API til at bygge mere vedligeholdelsesvenlige og skalerbare applikationer for et globalt publikum. Omfavn Composition API og frigør det fulde potentiale af Vue.js 3.

Vi opfordrer dig til at eksperimentere med Composition API i dine egne projekter og udforske de enorme muligheder, det tilbyder. God kodning!